<template>
  <div class="p-20">
    {{ d.name }}
    <div class="c-blue">SetupDemo</div>
    <SetupDemo ref="setupRef" title="SetupDemoPropTitle" @itemClick="itemClick"></SetupDemo>
    <div class="my-10 c-blue">tsxDemo</div>
    <TsxDemo ref="tsxDemo" title="TsxDemoPropTitle" @itemClick="itemClick" />
    <div class="my-10 c-blue">TsDemo</div>
    <TsDemo ref="tsDemo" title="TsDemoPropTitle" @itemClick="itemClick" />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import SetupDemo from '../components/SetupDemo/index.vue'
import TsxDemo from '../components/TsxDemo/index'
import TsDemo from '../components/TsDemo/index'
const setupRef = ref<any>(null)
const tsxDemo = ref<any>(null)
const tsDemo = ref<any>(null)
const d = reactive({
  name: 'demo',
})

function itemClick(d: string) {
  console.log('itemClick', d)
  console.log('setupRef:', setupRef.value)
  console.log('tsxDemo:', tsxDemo.value)
  console.log('tsDemo:', tsDemo.value)
}
const init = () => {
  return
}
init()
</script>

<style lang="scss"></style>
